<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目导航</title>
    <style>

        body{
background-image: url('./bj1.jpg');
            position: fixed;
            /* overflow: auto; */
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            /* background-attachment: fixed; */
            display: flex;
            
        }
        .task{
            position: fixed;
            height: 2000px;
            width: 1000px;
            background-color: black;
        }
        
        .lefttext{
                position: fixed;
                top: 50px;
                left: 50px;
                width:300px;
                height: 900px;
                border-radius: 10px;
                overflow: hidden;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
            }
            .lefttext ol li {
                color: rgb(0, 0, 0);
                font-size: 20px;

            }
            .lefttext ol li a{
                color: aqua;  
                font-size: 15px;
                
                text-decoration: none;
            }
            .lefttext ol li a:hover{
                color: rgb(255, 0, 0);  

            }

            

            iframe{
                position: fixed;
                height: 650px;
                width: 1160px;
                top: 50px;
                left: 375px;
                /* border: none; */
            }


            .righttext{
                position: fixed;
                top: 50px;
                left: 1570px;
                width:300px;
                height: 900px;
                border-radius: 10px;
                overflow: hidden;
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
            }
            .footer{
                background: linear-gradient(to bottom, rgba(228, 195, 236, 0.3), rgba(255, 255, 255, 0.1));
                /* background-color: brown; */
                position: fixed;
                top: 720px;
                left: 375px;
                height: 230px;
                width: 1160px;
                border-radius: 10px;
            }
            .footer2{
                /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); */
                background-color: brown;
                position: fixed;
                top: 1000px;
                left: 375px;
                height: 200px;
                width: 1160px;
                border-radius: 10px;
            }



    </style>
</head>
<body>

        <div class="lefttext">
            <p style="color: rgb(255, 255, 255); text-align: center; font-size: 30px;" >gitee项目目录</p>

            <ol>

                <li>引导页<a href="https://weiyizxy.gitee.io/yindao/"  target="yulan"> 预览</a> <a href="https://weiyizxy.gitee.io/yindao" target="_blank" > /跳转</a> </li>
                <li>牧草可视化大屏<a href="https://weiyizxy.gitee.io/daping" target="yulan"> 预览</a><a href="https://weiyizxy.gitee.io/daping" target="_blank" > /跳转</a></li>
                <li>古诗词—蝶恋花<a href="https://weiyizxy.gitee.io/dlh" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/dlh/" target="_blank" > /跳转</a> </li>
                <li>诗词展<a href="https://weiyizxy.gitee.io/shicizhan" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/shicizhan" target="_blank" > /跳转</a> </li>
                <li>新海诚动漫电影<a href="https://weiyizxy.gitee.io/new-haicheng-animation-film" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/new-haicheng-animation-film" target="_blank" > /跳转</a> </li>
                <li>运动改变生活<a href="https://weiyizxy.gitee.io/sports-change-life" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/sports-change-life" target="_blank" > /跳转</a> </li>
                <li>星空下的世界<a href="https://weiyizxy.gitee.io/starry-sky" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/starry-sky" target="_blank" > /跳转</a> </li>
                <li>绿色农场<a href="https://weiyizxy.gitee.io/green-farm" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/green-farm" target="_blank" > /跳转</a> </li>
                <li>旅游网页<a href=" https://weiyizxy.gitee.io/travel" target="yulan" > 预览</a> <a href=" https://weiyizxy.gitee.io/travel" target="_blank" > /跳转</a> </li>
                <li>浪漫花屋<a href="https://weiyizxy.gitee.io/romantic/" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/romantic/" target="_blank" > /跳转</a> </li>
                <li>诗词展<a href="https://weiyizxy.gitee.io/shicizhan" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/shicizhan" target="_blank" > /跳转</a> </li>
                <li>诗词展<a href="https://weiyizxy.gitee.io/shicizhan" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/shicizhan" target="_blank" > /跳转</a> </li>
                <li>诗词展<a href="https://weiyizxy.gitee.io/shicizhan" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/shicizhan" target="_blank" > /跳转</a> </li>
                <li>诗词展<a href="https://weiyizxy.gitee.io/shicizhan" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/shicizhan" target="_blank" > /跳转</a> </li>
                <li>诗词展<a href="https://weiyizxy.gitee.io/shicizhan" target="yulan" > 预览</a> <a href="https://weiyizxy.gitee.io/shicizhan" target="_blank" > /跳转</a> </li>


              </ol>

            
        </div>

   
            <iframe  name="yulan" allow="fullscreen" scrolling="auto" src="" allowfullscreen></iframe>


          <div class="righttext">
            <p style="color: rgb(255, 255, 255); text-align: center; font-size: 30px;" >项目目录</p>

        </div>

        <div class="footer">
            <!-- <p>菜单栏</p> -->

        </div>

        <!-- <div class="task">

        </div> -->



    <script>


    </script>

  
</body>
</html>